<template>
	<div class="chat_bg" v-if="!loading">
		<div class="header">
			<div class="d-c-c h_l">
				<img v-img-url="supplierLogo" class="img" />
				<div class="txt">{{ baseInfo.shopName }}-{{ serviceUserName }}</div>
				<div class="state-box">
					<div class="circle"></div>
					<div class="txt">在线</div>
				</div>
			</div>
			<div class="d-c-c" style="cursor: pointer" @click="exit">
				<div class="icon iconfont icon-tuichu"></div>
				<div class="ml4">退出</div>
			</div>
		</div>

		<div class="box d-s-s">
			<div class="box_l">
				<div class="title">用户列表</div>
				<div class="search"><el-input size="small" v-model="nickName" placeholder="请输入用户昵称"
						@input="changNickName"></el-input></div>

				<el-scrollbar class="left-scroll">
					<template v-if="tableData.length > 0">
						<div class="user_list">
							<template v-for="(v, idx) in tableData" :key="idx">
								<div class="item" @click="checked(v)">
									<span class="close_chat icon iconfont icon-shanchu"
										@click="closeChat(idx, v.relation_id)"></span>
									<div class="d-a-c" style="height: 100%">
										<view class="item_l">
											<div class="avatar">
												<img v-img-url="v&&v.avatarUrl" class="img" />
												<div class="circle" :class="{ active: true }"></div>
											</div>
										</view>
										<view class="item_r">
											<div class="d-b-c">
												<div class="name">{{ v.nickName }}</div>
												<div>{{ v.newMessage && v.newMessage.create_time }}</div>
											</div>

											<div class="notice">
												<text
													v-if="v.newMessage != null && v.newMessage.type == 0">{{ v.newMessage.content }}</text>
												<text v-if="v.newMessage != null && v.newMessage.type == 1">[图片]</text>
												<text v-if="v.newMessage != null && v.newMessage.type == 2">[商品]</text>
											</div>
										</view>
									</div>
								</div>
							</template>
						</div>
					</template>

					<div class="notable" v-else>暂无用户咨询</div>
				</el-scrollbar>
			</div>
			<div v-if="!is_open_socket" class="red danger_tip">当前未连接到服务器，请检查网络或者联系平台是否已开启在线客服</div>
			<div class="boxContent">
				<el-scrollbar class="box-scrollbar" ref="scroll" @scroll="scrollContent">
					<ul class="infinite-list" ref="container">
						<template v-for="(item, index) in content_list">
							<li :key="index" v-if="content_list != '' && item">
								<div :class="item.msg_type == 1 ? 'im_text' : 'im_text2'" class="m-item">
									<img class="avatar" v-if="item.msg_type == 2"
										v-img-url="userInfo&&userInfo.avatarUrl" />
									<img class="avatar" v-if="item.msg_type == 1" v-img-url="supplierLogo" />
									<div>
										<div class="my_date">{{ item.create_time }}</div>
										<div v-if="item.type == 0"
											:class="item.msg_type == 1 ? 'my_content' : 'you_content'">
											<div>{{ item.content }}</div>
										</div>
										<div v-if="item.type == 1"
											:class="item.msg_type == 1 ? 'my_content' : 'you_content'">
											<el-image style="width: 100px; height: 100px;border-radius: 10px;"
												:src="item.content" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
												:preview-src-list="[item.content]" :initial-index="0" fit="cover" />
										</div>
										<div v-if="item.type == 2"
											:class="item.msg_type == 1 ? 'my_content' : 'you_content'">
											<div class="product_txtitem">
												<div>
													<el-image style="width: 100px; height: 100px;border-radius: 10px;"
														:src="item.content.product_img" :zoom-rate="1.2" :max-scale="7"
														:min-scale="0.2" :preview-src-list="[item.content.product_img]"
														:initial-index="0" fit="cover" />
												</div>
												<div>
													<div class="pro_txtname">{{ item.content.product_name }}</div>
													<div class="pro_price">￥{{ item.content.product_price }}</div>
												</div>
											</div>
										</div>
										<div v-if="item.type == 3"
											:class="item.msg_type == 1 ? 'my_content' : 'you_content'">
											<div class="product_txtitem">
												<div>
													<el-image style="width: 100px; height: 100px;border-radius: 10px;"
														:src="item.content.product_img" :zoom-rate="1.2" :max-scale="7"
														:min-scale="0.2" :preview-src-list="[item.content.product_img]"
														:initial-index="0" fit="cover" />
												</div>
												<div>
													<div class="pro_txtname">{{ item.content.product_name }}</div>
													<div class="pro_price">
														共计{{ item.content.order_num }}件商品：合计￥{{ item.content.order_price }}
													</div>
												</div>
												<div>
													<div class="f12 gray6">订单号:{{ item.content.order_no }}</div>
													<div class="f12 gray6">创建时间:{{ item.content.create_time }}</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</li>
						</template>
					</ul>
				</el-scrollbar>
				<div v-if="user_id != 0">
					<div class="ww100"><span class="icon iconfont icon-tupian" @click="isupload = true"></span></div>

					<el-input class="chat_input" resize="none" type="textarea" :autosize="{ minRows: 2, maxRows: 2 }"
						placeholder="请输入内容" v-model="content"></el-input>
					<div class="pr btnbox"><button class="send_btn" @click="sendMessage">发消息</button></div>
				</div>
			</div>
			<div class="box_r">
				<el-tabs v-model="activeName" @tab-change="handleClick">
					<el-tab-pane label="客户信息" name="first"></el-tab-pane>
					<el-tab-pane label="交易订单" name="second"></el-tab-pane>
				</el-tabs>
				<el-scrollbar height="480px">
					<div v-if="activeName == 'first'">
						<div>
							<h2 class="mb18">客户信息</h2>
							<ul>
								<li>
									<div class="item_top">客户名称</div>
									<div v-if="userInfo && userInfo.nickName" class="item_btm">{{ userInfo.nickName }}
									</div>
									<div v-else class="item_btm">-</div>
								</li>
								<li>
									<div class="item_top">联系方式</div>
									<div v-if="userInfo && userInfo.mobile" class="item_btm">{{ userInfo.mobile }}</div>
									<div v-else class="item_btm">-</div>
								</li>
								<li>
									<div class="item_top">客户地址</div>
									<div v-if="userInfo && userInfo.city" class="item_btm">
										{{ userInfo.province }}省{{ userInfo.city }}市
									</div>
									<div v-else class="item_btm">-</div>
								</li>
								<li>
									<div class="item_top">客户性别</div>
									<div v-if="userInfo && (userInfo.gender == 0 || userInfo.gender == 1)"
										class="item_btm">{{ userInfo.gender ? '男' : '女' }}</div>
									<div v-else class="item_btm">-</div>
								</li>
							</ul>
						</div>
					</div>
					<div v-if="activeName == 'second'">
						<div class="order_list">
							<div class="order_item" v-for="(item, index) in orderList" :key="index">
								<div class="order_item_top d-b-c mb8">
									<div class="item_status blue">{{ item.deliveryStatusText }}</div>
									<div>{{ item.create_time }}</div>
								</div>
								<div class="mb8">
									<div class="d-s-s" v-for="(proitem, proindex) in item.productList" :key="proindex">
										<div>
											<el-image style="width: 50px; height: 50px;" :src="proitem.imagePath"
												:zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
												:preview-src-list="[proitem.imagePath]" :initial-index="0"
												fit="cover" />
										</div>
										<div class="ml4">
											<div>{{ proitem.product_name }}</div>
											<div v-if="proitem.isUserGrade == 1">
												￥{{ proitem.gradeProductPrice }}X{{ proitem.totalNum }}</div>
											<div v-else>￥{{ proitem.product_price }}X{{ proitem.totalNum }}</div>
										</div>
									</div>
								</div>
								<div>
									<div>订单编号:{{ item.order_no }}</div>
									<div>付款时间:{{ item.pay_time }}</div>
									<div>实收款:￥{{ item.pay_price }}</div>
								</div>
							</div>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
		<Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc"></Upload>
	</div>
</template>

<script>
	import ServiceApi from '@/api/service.js';
	import logApi from '@/api/login.js';
	import noticemp3 from '@/assets/notice.mp3';
	import Upload from '@/components/file/Upload.vue';
	import {
		useUserStore
	} from '@/store';
	const {
		userInfo,
		afterLogout,
		socketUrl
	} = useUserStore();
	export default {
		data() {
			return {
				baseInfo: userInfo,
				loading: false,
				path: socketUrl,
				socketTask: null,
				usersocketList: '',
				nickName: '',
				// 确保websocket是打开状态
				is_open_socket: false,
				content: '',
				/*列表数据*/
				tableData: [],
				pageSize: 20,
				/* 联系人页数*/
				curPage: 1,
				/* 聊天记录页数*/
				repage: 1,
				user_id: 0,
				appId: 0,
				chat_user_id: 0,
				conversation: '会话',
				content_list: [],
				/* 聊天滚动条高度*/
				scrollHeight: 0,
				nomore: false,
				isupload: false,
				/*当前图片类别*/
				type: null,
				file_path: '',
				logo_file_path: '',
				user_logo_file_path: '',
				intervalId: null,
				centerDialogVisible: false,
				chooseimg: '',
				userInfo: {},
				activeName: 'second',
				orderList: [],
				is_destory: false,
				serviceUserName: '',
				chatLoding: false
			};
		},
		components: {
			Upload
		},
		watch: {
			'is_open_socket': function(n, o) {
				if (n != o && !n) {
					console.log('**************连接断开*****************');
				}
			}
		},
		mounted() {
			// document.addEventListener('visibilitychange', this.handleVisiable);
			// 初始化
			this.init();
			this.getTableList();
			const container = this.$refs.container;
			//这里的定时是为了列表首次渲染后获取scrollHeight并滑动到底部。
			setTimeout(() => {
				this.scrollHeight = container.scrollHeight;
			}, 800);
			container.addEventListener('scroll', e => {
				//这里的2秒钟定时是为了避免滑动频繁，节流
				setTimeout(() => {
					//滑到顶部时触发下次数据加载
					if (e.target.scrollTop == 0 && !this.nomore) {
						//将scrollTop置为10以便下次滑到顶部
						e.target.scrollTop = 10;
						//加载数据
						this.initData();
						//这里的定时是为了在列表渲染之后才使用scrollTo。
						this.$nextTick(() => {
							let scrollH = this.$refs.container.scrollHeight - this.scrollHeight;
							e.target.scrollTo(0, scrollH + 30); //-30是为了露出最新加载的一行数据
						});
					}
				}, 2000);
			});
		},
		unmounted() {
			// 销毁监听
			this.closeSocket();
		},
		methods: {
			handleVisiable() {
				console.log('handleVisiable')
				this.newData();
			},
			scrollContent(e) {
				if (e.scrollTop < 1) {
					this.initData();
				}
			},
			exit() {
				let self = this;
				ElMessageBox.confirm('此操作将退出登录, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						logApi.logout({}, true)
							.then(data => {
								self.logout();
							})
							.catch(error => {});
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: '已取消退出',
						});
					});
			},
			async logout() {
				await afterLogout();
				this.$router.push('/login');
			},
			init: function() {
				if (typeof WebSocket === 'undefined') {
					alert('您的浏览器不支持socket');
				} else {
					let json = this.baseInfo;
					this.chat_user_id = json && json.chat_user_id;
					this.appId = json && json.app_id;
				}
			},
			open: function() {
				let self = this;
				console.log('socket连接成功', self.socketTask);
				self.is_open_socket = true;
				// 开始发送心跳
				self.startHeart();
				// 注：只有连接正常打开中 ，才能正常收到消息
				self.socketTask.onmessage = self.getMessage;
			},
			startHeart() {
				let self = this;
				let data = JSON.stringify({
					type: 'ping',
					to: self.user_id,
					from: self.chat_user_id,
					msg_type: 1,
					app_id: this.appId
				});

				self.intervalId = setInterval(function() {
					console.log('发送心跳', self.user_id);
					self.send(data);
				}, 10000);
			},
			/*socket关闭*/
			onclose() {
				let self = this;
				console.log('关闭');
				if (self.is_destory) {
					return;
				}
				console.log('已经被关闭了');
				//重连机制
				self.socketTask = null;
				self.is_open_socket = false;
				clearInterval(self.intervalId);
				self.init();
				self.conectWebsolket();
			},
			error: function() {
				console.log('连接错误');
			},
			closeSocket: function() {
				console.log('连接关闭');
				let self = this;
				self.is_destory = true;
				console.log('清除---------------');
				if (!self.socketTask || self.socketTask == null) {
					return;
				}
				let data = JSON.stringify({
					type: 'close',
					from_id: self.my_id,
					to: self.user_id
				});
				console.log('清除---------------');
				console.log(self.socketTask);
				self.send(data);
				self.socketTask.close();
				self.socketTask = null;
				self.is_open_socket = false;
				console.log(self.intervalId);
				clearInterval(self.intervalId);
				console.log('清楚成功');
			},
			getMessage: function(msg) {
				let newdata = JSON.parse(msg.data);
				console.log(newdata);
				let date = new Date();
				//绑定用户
				if (newdata.type == 'init') {
					ServiceApi.bindClient({
							client_id: newdata.client_id
						},
						true
					).then(res => {
						console.log('init---绑定uid');
					});
				}
				if (!newdata.content) {
					return false;
				}
				/* 接收到非状态消息 */
				// 播放声音
				this.relist();
				// let audio = new Audio();
				// audio.src = noticemp3;
				// audio.play();
				// console.log('播放声音');
				/* 收到当前用户的消息*/
				console.log('------------------' + this.user_id);
				if (newdata.user_id == this.user_id) {
					console.log('xxxxxxxxxxxx');
					let item = {
						content: newdata.content,
						from: newdata.user_id,
						msg_type: newdata.msg_type,
						type: newdata.type,
						create_time: this.formatDate(),
						avatarUrl: this.userInfo && this.userInfo.avatarUrl,
						app_id: this.appId
					};
					if (item.type == 2 || item.type == 3) {
						item.content = JSON.parse(item.content);
					}
					this.content_list = [...this.content_list, item];
					console.log('-=-=-=-=');
					console.log(this.content_list);
					this.$nextTick(() => {
						this.$refs.container.scrollTop = this.$refs.container.scrollHeight;
					});
				}
				if (this.tableData.length >= 1) {
					let flag = false;
					let n = 0;
					this.tableData.forEach((olditem, index) => {
						if (olditem.user_id == newdata.user_id) {
							flag = true;
							n = index;
						}
					});
					console.log(flag)
					console.log(this.tableData[n])
					console.log(this.tableData[n].newMessage)
					if (flag && this.tableData[n] && this.tableData[n].newMessage) {

						this.tableData[n].newMessage.content = newdata.content;
						this.tableData[n].newMessage.msg_type = newdata.msg_type;
						this.tableData[n].newMessage.create_time = this.formatDate();
						this.relist();
					} else {
						if (newdata.user_id) {
							console.log('收到当前消息了,要添加记录了');
							ServiceApi.getinfo({
									user_id: newdata.user_id
								},
								true
							).then(res => {
								/* this.tableData.unshift({
										avatarUrl: res.data.data.userInfo.avatarUrl,
										nickName: res.data.data.userInfo.nickName,
										user_id: res.data.data.userInfo.user_id,
										newMessage: {
											content: newdata.content,
											create_time: newdata.create_time,
											msg_type: newdata.msg_type
										}
									}); */
							});
						}
					}
				} else {
					ServiceApi.getinfo({
							user_id: newdata.user_id
						},
						true
					).then(res => {
						/* this.tableData.unshift({
								avatarUrl: res.data.data.userInfo.avatarUrl,
								nickName: res.data.data.userInfo.nickName,
								user_id: res.data.data.userInfo.user_id,
								newMessage: {
									content: newdata.content,
									create_time: newdata.create_time,
									msg_type: newdata.msg_type
								}
							}); */
					});
				}
				console.log('收到消息');
			},
			async changNickName() {
				this.getTableList('searchUser');
			},
			newData() {
				let self = this;
				let Params = {};
				Params.user_id = self.user_id;
				Params.page = self.repage;
				Params.msg_type = 2;
				ServiceApi.recordlist(Params, true)
					.then(data => {
						self.loading = false;
						data.data.list.data.forEach((v) => {
							v.content = JSON.parse(v.content);
						});
						let list = data.data.list.data;
						self.content_list = [...self.content_list, list[0]];
					})
					.catch(error => {});
			},
			send(data) {
				let self = this;
				// 未连接
				if (!self.is_open_socket) {
					return;
				}
				self.socketTask.send(data);
			},
			handleClick(tab) {
				self.activeName = tab;
			},
			sendMessage() {
				let self = this;
				if (self.content == '') {
					return false;
				}
				// 未连接
				if (!self.is_open_socket) {
					return;
				}
				let data = JSON.stringify({
					msg_type: 1,
					to: self.user_id,
					from: self.chat_user_id,
					type: 0,
					// type: "msg",
					content: self.content,
					app_id: this.appId
				});
				let newdata = JSON.parse(data);
				let item = {
					msg_type: 1,
					content: newdata.content,
					// type: newdata.type,
					type: 0,
					// type: "msg",
					create_time: self.formatDate(),
					app_id: this.appId
				};
				console.log(data);
				self.content_list = [...self.content_list, item];
				self.socketTask.send(data);
				self.content = '';
				self.$nextTick(() => {
					self.relist();
					self.$refs.scroll.setScrollTop(self.$refs.container.scrollHeight);
				});
			},
			/*获取列表*/
			getTableList(type) {
				let self = this;
				let Params = {};
				Params.limit = 100;
				Params.nickName = self.nickName;
				if (type != 'searchUser') {
					self.loading = true;
				}
				ServiceApi.servicelist(Params, true).then(res => {
					self.loading = false;
					self.tableData = res.data.list.data;
					if (type != 'searchUser') {
						if (self.tableData.length > 0) {
							self.checked(self.tableData[0]);
						} else {
							this.getUserinfo();
							this.conectWebsolket();
						}
					}
				});
			},
			initData() {
				this.repage++;
				this.getRecordlist();
			},
			getRecordlist() {
				let self = this;
				let Params = {};
				Params.user_id = self.user_id;
				Params.page = self.repage;
				Params.list_rows = 15;
				Params.msg_type = 2;
				self.chatLoding = true;
				ServiceApi.recordlist(Params, true)
					.then(res => {
						for (let i = 0; i < res.data.list.data.length; i++) {
							let item = res.data.list.data[i];
							if (item.type == 2 || item.type == 3) {
								item.content = JSON.parse(item.content);
							}
							// if (res.data.records[i].contentJson) {
							//   res.data.records[i].content = res.data.records[i].contentJson;
							// }
						}
						let list = res.data.list.data.reverse();
						self.content_list = [...list, ...self.content_list];
						if (res.data.last_page <= self.repage) {
							self.nomore = true;
						}
						this.scrollHeight = this.$refs.container.scrollHeight;
						if (self.repage == 1) {
							self.$nextTick(() => {
								self.$refs.scroll.setScrollTop(self.$refs.container.scrollHeight);
							});
						}
						console.log(self.content_list);
						self.loading = false;
						self.chatLoding = false;
					})
					.catch(error => {
						self.loading = false;
						self.chatLoding = false;
					});
			},

			checked(item) {
				if (this.chatLoding) {
					return
				}
				// if (this.socketTask != null) {
				// 	this.closeSocket();
				// }
				this.user_id = item.user_id;
				this.conversation = item.nickName;
				this.user_logo_file_path = item && item.avatarUrl;
				this.content_list = [];
				this.userInfo = {};
				this.repage = 1;
				this.nomore = false;
				this.getRecordlist();
				this.getUserinfo();
				if (this.socketTask == null) {
					this.conectWebsolket();
				}
				// this.queryUserState();
			},
			conectWebsolket() {
				let url = this.path + '/socket?user_id=' + this.chat_user_id + '&usertype=service';
				// 实例化socket
				this.socketTask = new WebSocket(url);
				// 监听socket连接
				this.socketTask.onopen = this.open;
				// 监听socket关闭
				this.socketTask.onclose = this.onclose;
				// 监听socket错误信息
				this.socketTask.onerror = this.error;
			},

			// 查询用户在线状态
			queryUserState() {
				this.usersocketList = [];
				this.tableData.forEach(v => {
					let url = this.path + '/socket?user_id=' + v.user_id + '&usertype=user';
					// 实例化socket
					let socketTask = new WebSocket(url);
					this.socketTask = new WebSocket(url);
					// 监听socket连接
					this.socketTask.onopen = this.open;
					// 监听socket关闭
					this.socketTask.onclose = this.onclose;
					// 监听socket错误信息
					this.socketTask.onerror = this.error;
				});
			},
			DateToHM(string) {
				let myDate = new Date();
				let newsDate = new Date(string);
				if (string) {
					if (myDate.toLocaleDateString() == newsDate.toLocaleDateString()) {
						var f = string.split(' ', 2);
						var t = (f[1] ? f[1] : '').split(':', 3);
						var hm = t[0] + ':' + t[1];
						return hm;
					} else {
						return newsDate.toLocaleDateString();
					}
				} else {
					return '';
				}
			},

			/*关闭选择图片*/
			returnImgsFunc(e) {
				let self = this;
				console.log(e);
				if (e != null && e.length > 0) {
					let data = JSON.stringify({
						msg_type: 1,
						to: self.user_id,
						from: self.chat_user_id,
						type: 1,
						// type: "msg",
						content: e[0].file_path,
						app_id: this.appId
					});
					let newdata = JSON.parse(data);
					let date = new Date();
					let item = {
						msg_type: 1,
						content: newdata.content,
						// type: newdata.type,
						type: 1,
						// type: "msg",
						create_time: self.formatDate(),
						app_id: this.appId
					};
					this.content_list = [...this.content_list, item];
					self.socketTask.send(data);
					self.$nextTick(() => {
						self.$refs.scroll.setScrollTop(self.$refs.container.scrollHeight);
					});
				}
				self.isupload = false;
			},
			clickImg(path) {
				this.centerDialogVisible = true;
				this.chooseimg = path;
			},
			closeChat(i, relation_id) {
				this.tableData.splice(i, 1);
				if (relation_id) {
					ServiceApi.remove({
							relation_id: relation_id
						},
						true
					).then(res => {});
				}
			},
			relist() {
				let self = this;
				self.$nextTick(() => {
					self.$refs.scroll.setScrollTop(self.$refs.container.scrollHeight);
				});
				let Params = {};
				Params.limit = 100;
				Params.nickName = '';
				ServiceApi.servicelist(Params, true).then(res => {
					self.tableData = res.data.list.data;
				});
			},
			formatDate(time) {
				let date = new Date();
				if (time) {
					date = new Date(time);
				}
				let year = date.getFullYear(); // 年
				let month = date.getMonth() + 1; // 月
				let day = date.getDate(); // 日
				let week = date.getDay(); // 星期
				let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let hour = date.getHours(); // 时
				hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
				return `${year}/${month}/${day} ${hour}:${minute}`;
			},
			getUserinfo() {
				let self = this;
				ServiceApi.getinfo({
						user_id: this.user_id
					},
					true
				).then(res => {
					self.serviceUserName = res.data.data.name;
					self.userInfo = res.data.data.userInfo;
					self.orderList = res.data.data.orderList;
					self.supplierLogo = res.data.data.logo;
				});
			},
			dateConversion(str) {
				let date = '';
				date = new Date(Date.parse(str.replace(/-/g, '/')));
				date = date.getTime();
				return date;
			},
			/*选择上传图片*/
			fileChange(e) {
				console.log(e);
			},

			/*选择图片之前*/
			onBeforeUploadImage(file) {
				const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';
				const isLt1M = file.size / 1024 / 1024 < 2;
				if (!isIMAGE) {
					ElMessage.error('上传文件只能是图片格式!');
				}
				if (!isLt1M) {
					ElMessage.error('上传文件大小不能超过 2MB!');
				}
				return isIMAGE && isLt1M;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.header {
		background: #409eff;
		border-radius: 11px 11px 0px 0px;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 10px;

		.state-box {
			width: 72px;
			height: 27px;
			line-height: 27px;
			border-radius: 20px;
			background: #ffffff;
			margin-left: 6px;
			color: #666666;
			font-size: 14px;
			text-align: center;
			position: relative;

			.circle {
				width: 8px;
				height: 8px;
				background: #22ac38;
				border-radius: 50%;
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.h_l {
			height: 100%;
		}

		.img {
			width: 36px;
			height: 36px;
			border-radius: 50%;
		}

		.txt {
			margin-left: 6px;
		}
	}

	.box {
		background: #ffffff;
		height: calc(100vh - 96px);

		.title {
			font-size: 14px;
			font-weight: bold;
			color: #333333;
			position: relative;
			padding-left: 12px;
			margin-top: 12px;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				width: 4px;
				height: 14px;
				background: #409eff;
				top: 4px;
			}
		}

		.box_l,
		.box_r {
			width: 300px;
			padding: 0 10px;
			height: calc(100vh - 96px);
		}

		.box_l {
			.search {
				border-bottom: 1px solid #eee;
				padding: 12px 0;
			}

			.user_list {
				.item {
					height: 70px;
					border-bottom: 1px solid #eee;
					cursor: pointer;
					position: relative;
				}

				.item_r {
					flex: 1;
				}

				.avatar {
					width: 36px;
					height: 36px;
					border-radius: 50%;
					margin-right: 4px;
					position: relative;

					// overflow: hidden;
					.circle {
						width: 8px;
						height: 8px;
						background: #999999;
						position: absolute;
						right: 0;
						bottom: 1px;
						border-radius: 50%;

						&.active {
							background: #22ac38;
						}
					}

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.name {
					font-size: 12px;
					font-weight: bold;
					width: 100px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.close_chat {
					position: absolute;
					right: 0;
					top: 68%;
					transform: translateY(-50%);
				}

				.notice {
					width: 220px;
					margin-top: 4px;
					color: #999999;
					/* 设置宽度原因：让文本宽度超过200px时换行显示 */
					/* 不同浏览器有不同的前缀，比如-moz-box */
					display: -webkit-box;
					/* 子元素的排列方式：垂直排列 */
					-webkit-box-orient: vertical;
					/* 设置3行文本之后打点显示 */
					-webkit-line-clamp: 2;
					/* 超出盒子部分隐藏显示 */
					overflow: hidden;
				}
			}
		}

		.boxContent {
			padding: 0 10px;
			flex: 1;
			border-left: 1px solid #eee;
			border-right: 1px solid #eee;
			height: calc(100vh - 96px);
		}

		.box_r {}
	}

	.mb8 {
		margin-bottom: 8px;
	}

	.left {
		background-color: #f0f0f0;
	}

	.right {
		margin-left: 30px;
		background-color: rgba(242, 242, 242, 0.5);
		box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
		margin: 5px;
	}

	.left_item {
		padding: 8px 15px;
		border-bottom: 1px solid #cccccc;
		background: #f0f0f0;
	}

	.left_item_active {
		padding: 8px 15px;
		border-bottom: 1px solid #cccccc;
		background: #ffffff;
	}

	.left_item_img {
		width: 40px;
		height: 40px;
	}

	.left_item_name {
		font-size: 14px;
		margin-left: 10px;
	}

	.left_item_content {
		color: rgb(153, 153, 153);
		font-size: 12px;
		margin-left: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.im_text {
		/* width: 100%; */
		display: flex;
		margin-top: 30px;
		flex-direction: row-reverse;
		position: relative;
		padding-bottom: 10px;
	}

	.im_text2 {
		/* width: 100%; */
		display: flex;
		margin-top: 30px;
		position: relative;
		padding-bottom: 10px;
	}

	.im_text .avatar {
		width: 40px;
		height: 40px;
		margin-left: 5px;
		border-radius: 10px;
		background: none;
		align-items: flex-start;
	}

	.im_text2 .avatar {
		width: 40px;
		height: 40px;
		margin-right: 5px;
		border-radius: 10px;
		background: none;
		align-items: flex-start;
	}

	.you_content,
	.my_content {
		background-color: #ffffff;
		margin-top: 15px;
	}

	.im_text .my_content {
		max-width: 450px;
		align-items: flex-start;
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		word-break: break-all;
	}

	.im_text2 .my_content {
		max-width: 450px;
		align-items: flex-start;
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		word-break: break-all;
	}

	.im_text .you_content {
		max-width: 450px;
		align-items: flex-start;
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		word-break: break-all;
	}

	.im_text2 .you_content {
		max-width: 450px;
		align-items: flex-start;
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		word-break: break-all;
	}

	.infinite-list {
		// height: 400px;
		padding: 15px;
	}

	.el-main {
		padding: 0;
	}

	.chat_header {
		border-bottom: 1px solid #cacaca;
		margin-bottom: 10px;
		line-height: 60px;
		background-color: #ffffff;
	}

	.content_title {
		font-size: 16px;
	}

	.my_content {
		box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
	}

	.you_content {
		box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
	}

	.pro_img {
		height: 100px;
		width: 100px;
		border-radius: 10px;
		background-color: #ffffff;
	}

	.pro_txtname {
		max-width: 100px;
		font-size: 14px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.pro_price {
		font-size: 12px;
		color: #e2231a;
	}

	.chat_input {
		border: none;
		font-weight: 400;
		font-style: normal;
		font-size: 13px;
		line-height: normal;
		color: #000000;
		text-align: left;
		border-width: 0px;
		outline: none;
		margin-bottom: 10px;
		width: 95%;
	}

	.chat_input textarea {
		outline: none;
		border: none;
	}

	.send_btn {
		border-width: 0px;
		width: 78px;
		height: 32px;
		line-height: 32px;
		background: inherit;
		background-color: rgba(0, 110, 255, 0.898039215686275);
		border: none;
		border-radius: 2px;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		font-weight: 400;
		font-style: normal;
		color: #ffffff;
		position: absolute;
		outline: none;
		right: 7px;
		top: 5px;
		border-radius: 8px;
	}

	.btnbox {
		height: 50px;
		background-color: #ffffff;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.cont_img {
		width: 100px;
		height: 100px;
		border-radius: 10px;
	}

	.chat_bg {
		// background: rgba(242, 242, 242, 0.5);
		background: #ffffff;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}

	.el_aside {
		box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
		margin: 5px;
	}

	.icon-tupian:hover {
		color: #1296db;
	}

	.notable {
		text-align: center;
		background: #ffffff;
		padding: 30px;
		font-size: 17px;
	}

	.my_date {
		color: #cccccc;
		font-size: 12px;
		position: absolute;
		top: -10px;
	}

	.im_text .my_date {
		right: 45px;
	}

	.user_info {
		box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
		margin: 5px;
		background-color: #ffffff;
		padding: 30px;
		max-height: calc(100vh - 128px);
	}

	.item_top {
		color: #cccccc;
		margin-bottom: 8px;
	}

	.item_btm {
		font-size: 13px;
		color: #333333;
		margin-bottom: 18px;
	}

	.order_item_top {
		background-color: #f3f3f3;
		padding: 5px 16px;
		border-radius: 6px;
		margin-top: 18px;
	}

	.danger_tip {
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		text-align: center;
	}

	.avatar-uploader .icon-tupian.icon.iconfont {
		font-size: 22px;
		margin-left: 10px;
	}

	.left .icon-shanchu.icon.iconfont {
		cursor: pointer;
		color: #999999;
		font-size: 14px;
		margin-left: 5px;
	}

	.box-scrollbar {
		height: calc(100vh - 134px - 96px);
	}

	.left-scroll {
		height: calc(100vh - 90px - 96px);
	}

	.right-scroll {
		height: calc(100vh - 54px - 96px);
	}
</style>